<template>
	<view>
		<view class="header"></view>	
		
		<view class="info" v-if="online && online.aid" @click="$go.burl('my/setting')">
			<image class="img" v-if="online.user && online.user.icon" :src="online.user.icon" ></image>
			<image class="img" v-else src="https://www.xmemc.cn/upload/default.jpg" ></image>
			
			<view class="info_name"><view class="span">{{online.user && online.user.name?online.user.name:`微信用户`}}</view> 
			<i class="iconfont icon-nan" v-if="online.user && online.user.gender == 1"></i>
			<i class="iconfont icon-nv" v-else-if="online.user && online.user.gender == 2"></i>
			<i class="iconfont icon-m" v-else></i>
			</view>
			<view class="info_text">{{online.user && online.user.intro?online.user.intro:''}}</view>
		</view>
		<view class="info" v-else @click="$go.login()">
			<image class="img" src="https://www.xmemc.cn/upload/default.jpg" ></image>
			<view class="info_name"><view class="span">请登录</view> 
			<i class="iconfont icon-m"></i>
			</view>
			<view class="info_text">登录之后查看更多信息</view>
		</view>
		
		<view class="ui-table">
			<view class="div" @click="$go.burl('my/info')">
				<view class="span">关于我们</view>
				<i class="iconfont icon-you1"></i>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		computed: {
			online(){
				let online = this.$store.getters['online/getOnline'];
				
				if(online && online.aid) return online ;
				return {} ;
			}
		},
		data() {
			return {
				
			};
		},
		onLoad() {
			
		},
		
		methods: {
			
			fetch(){
				
			},
		}
	}
</script>

<style>
	
	*{
		margin: 0;
		padding: 0;
		font-family: "微软雅黑";
	}
	.header{
		/* 头部包含背景图 */
		background-color: #ffda19;
		width: 100%;
		overflow: hidden;
		
		height: 160px;
	}
	.header>.p{
		/* 放我的和关机图标 */
		height: 50px;
		line-height: 50px;
	}
	.header>.p>.span:nth-of-type(1){
		display: inline-block;
		float: left;
		padding-left: 16px;
		font-size: 18px;
		font-weight: bold;
	}
	.header>.p>.span:nth-of-type(2){
		display: inline-block;
		float: right;
		padding-right: 16px;
	}
	.header>.p>.span:nth-of-type(2)>i{
		font-size: 18px;
		font-weight: bold;
	}
	
	
	.info{
		/* 存放个人信息的 */
		width: calc( 100% - 32px );
		background-color: #FFFFFF;
		margin-left: 16px;
		margin-top: -48px;
		float: left;
		border-radius: 8px;
		box-shadow: 0 0 6px rgba(255,218,25,0.6);
	}
	.info>.img{
		width: 66px;
		height: 66px;
		border-radius: 66px;
		margin: 0 auto;
		display: block;
		margin-top: -33px;
		border: 1px solid #ffda19;
	}
	.info_name{
		text-align: center;
		font-size: 16px;
		color: #444444;
		height: 30px;
		line-height: 30px;
	}
	.info_name .span,.info_name i{
		display: inline-block;
	}
	.info_text{
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #6F6F6F;
		overflow: hidden;
	}
	.info_item{
		width: calc( 100% / 3 );
		float: left;
		text-align: center;
		padding: 4px 0;
	}
	.info_item>.p:nth-of-type(1){
		font-size: 12px;
	}
	.info_item>.p:nth-of-type(2){
		font-size: 14px;
		color: #6F6F6F;
	}
	.info_item:nth-of-type(1){
		border-radius: 0 0 0 8px;
	}
	.info_item:nth-last-of-type(1){
		border-radius: 0 0 8px 0;
	}
	
	
	.ui-table{
		float: left;
		width: calc( 100% - 64px );
		background-color: #FFFFFF;
		border-top: 8px solid #EFEFF4;
		padding: 0 32px;
	}
	.ui-table>.div{
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #EFEFF4;
	}
	.ui-table>.div>.span{
		float: left;
	}
	.ui-table>.div>i{
		float: right;
	}
	
	.icon_comment{
		border-radius: 100px;
		font-size: 20px;
		width: 30px;
		height: 30px;
		display: inline-block;
		line-height: 30px;
		color: #FFFFFF;
	}
	
	.icon-xiezuo{
		background-color: #fbdc58;
	}
	.icon-tupian{
		background-color: #94ede2;
	}
	.icon-yinyue{
		background-color: #bceccd;
	}
	.icon-shipin{
		background-color: #ffbadc;
	}
	
	.icon-nan{
		width:40upx;
		height:40upx;
		background: #fff url(https://www.xmemc.cn/static/nanicon.png) top center no-repeat;
		background-size:100%;
	}
	.icon-nv{
		width:40upx;
		height:40upx;
		background: #fff url(https://www.xmemc.cn/static/nvicon.png) top center no-repeat;
		background-size:100%;
	}
	.icon-m{
		width:40upx;
		height:40upx;
		background: #fff url(https://www.xmemc.cn/static/mi.png) top center no-repeat;
		background-size:100%;
	}
	.icon-you1{
		width:40upx;
		height:40upx;
		background: #fff url(https://www.xmemc.cn/static/right.png) top center no-repeat;
		background-size:100%;
		margin-top: 30upx;
	}
</style>
